<template>
  <div class="box">
    <Header></Header>

    <div class="main" @scroll="scrollto" ref="main">
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <banner></banner>
        <Nav></Nav>
        <secskill></secskill>
        <list :count="count1" :goodsList="goodsList1"></list>
        <van-icon name="back-top" @click="backTo" v-if="scrollTop>500"/>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import banner from "../components/Home/Banner";
import Nav from "../components/Home/Nav";
import Header from "../components/Home/Header";
import Secskill from "../components/Home/Secskill.vue";
import List from "../components/Home/List.vue";

import Vue from "vue";
import { PullRefresh } from "vant";
import { getproList } from "../apis/home";

Vue.use(PullRefresh);
export default {
  components: { banner, Nav, Header, Secskill, List },
  // name: '我的Home',

  data() {
    return {
      goodsList1: [],
      count1: 7,
      isLoading: false,
      scrollTop: 0,
      timer:null,
    };
  },

  mounted() {},

  methods: {
    // 刷新
    onRefresh() {
      setTimeout(() => {
        getproList({ count: this.count, limitNum: 8 }).then((data) => {
          this.isLoading = false;
          this.goodsList1 = data.data.data;
          this.count1 = 1;
        });
        // 回顶
      }, 1000);
    },
    scrollto() {
      this.scrollTop = this.$refs.main.scrollTop;
    },
    backTo() {
      this.timer = setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer);
        }
        this.$refs.main.scrollTop -= 100;
      }, 15);
    },
  },
};
</script>

<style  scoped>
.van-icon {
  position: fixed;
  bottom: 1.4rem;
  right: 0.3rem;
  /* border: 1px solid red; */
  border-radius: 50%;
  width: 0.4rem;
  text-align: center;
  height: 0.4rem;
  background-color: #eee;
  font-size: 0.3rem;
  line-height: 0.4rem;
  color: #aaa;
}
</style>